<!DOCTYPE html>
<html lang="zh">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>保证金明细</title>
    <link href="css/main.css" type="text/css" rel="stylesheet" />
</head>
<body id="bzjmx">
<div  class="container">
    <div class="goldenNumber clearfix">
        <span class="gn_left fl">余额:<label>544￥</label></span>
        <span class="gn_right fr">保证金说明</span>
    </div>
    <div class="gn_detail">
        <ul class="gnd_tabList clearfix">
            <li class="detail_active"><span>全部</span></li>
            <li><span>收入</span></li>
            <li><span>支出</span></li>
        </ul>
        <ul class="gnd_tabDateil">
            <li>
                <h2>+100</h2>
                <p>
                    <span class="gnd_tabDateil_info">充值100元</span>
                    <span class="gnd_tabDateil_date">2017.06.07 16:40:50</span>
                </p>
            </li>
            <li>
                <h2>+10</h2>
                <p>
                    <span class="gnd_tabDateil_info">抽奖得10金豆</span>
                    <span class="gnd_tabDateil_date">2017.06.07 16:40:50</span>
                </p>
            </li>
            <li>
                <h2>-10</h2>
                <p>
                    <span class="gnd_tabDateil_info">违规扣除100元</span>
                    <span class="gnd_tabDateil_date">2017.06.07 16:40:50</span>
                </p>
            </li>
            <li>
                <h2>-10</h2>
                <p>
                    <span class="gnd_tabDateil_info">违规扣除100元</span>
                    <span class="gnd_tabDateil_date">2017.06.07 16:40:50</span>
                </p>
            </li>
            <li>
                <h2>-10</h2>
                <p>
                    <span class="gnd_tabDateil_info">违规扣除100元</span>
                    <span class="gnd_tabDateil_date">2017.06.07 16:40:50</span>
                </p>
            </li>
            <li>
                <h2>-10</h2>
                <p>
                    <span class="gnd_tabDateil_info">违规扣除100元</span>
                    <span class="gnd_tabDateil_date">2017.06.07 16:40:50</span>
                </p>
            </li>
            <li>
                <h2>-10</h2>
                <p>
                    <span class="gnd_tabDateil_info">违规扣除100元</span>
                    <span class="gnd_tabDateil_date">2017.06.07 16:40:50</span>
                </p>
            </li>

        </ul>
    </div>
</div>
<script src="js/rem.js"></script>
<script src="js/jquery.js"></script>
<script>
    $(function(){
        $(".gnd_tabList li").click(function(){
            $(".gnd_tabList li").removeClass("detail_active");
            $(this).addClass("detail_active");
        })
    })
</script>
</body>
</html>